<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>成绩验证</title>
    <style>
        .error {
            color: red;
        }
        .success {
            color: green;
        }
    </style>
</head>
<body>
    <form id="gradeForm">
        <label for="grade">语文:</label>
        <input type="text" id="grade" name="grade">
        <span id="message"></span>
        <br><br>
        <input type="submit" value="提交">
    </form>

    <script>
        document.getElementById('gradeForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            const gradeInput = document.getElementById('grade').value.trim();
            const messageElement = document.getElementById('message');

            // 清空之前的消息
            messageElement.textContent = '';
            messageElement.classList.remove('error', 'success');

            // 检查输入是否为空
            if (gradeInput === '') {
                messageElement.textContent = '语文成绩内容不能为空';
                messageElement.classList.add('error');
                return;
            }

            // 检查输入是否为数字
            if (!/^\d+$/.test(gradeInput)) {
                messageElement.textContent = '语文成绩输入不合法';
                messageElement.classList.add('error');
                return;
            }

            // 检查成绩范围
            const grade = parseInt(gradeInput, 10);
            if (grade < 0 || grade > 100) {
                messageElement.textContent = '语文成绩输入不合法';
                messageElement.classList.add('error');
                return;
            }

            // 显示正确消息
            messageElement.textContent = '恭喜，输入正确';
            messageElement.classList.add('success');
        });
    </script>
</body>
</html>